import React, { FC, useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { Card } from 'antd'
import { useTranslation } from 'react-i18next'
import { getTagType } from '@/api/article'

const TagType: FC = () => {
  const [tagType, setTagType] = useState([])
  const { t } = useTranslation()
  useEffect(() => {
    getTagType()
      .then(({ data }) => {
        console.log(data)
        setTagType(data)
      })
      .catch((err) => {
        console.log(err)
      })
  }, [])
  return (
    <div className="mb20">
      <Card size="small" title={t('category')}>
        {tagType.map((item: any) => {
          return (
            <p className="f12" key={item.id}>
              <Link to="/asdfg">
                <span>{item.label}</span>

                <span>
                  {t('total')} {item.articleCount} {t('count')}
                </span>
              </Link>
            </p>
          )
        })}
      </Card>
    </div>
  )
}

export default TagType
